<script setup>
import { ref } from 'vue';
import TextArea from './text-area.vue'

const textAreaRef = ref()

const validate = (valueList) => {
    return valueList.map((value, index) => {
        if (value.length > 50) return index
        return NaN
    }).filter(e => !Number.isNaN(e))
}

const handleSubmit = () => {
    const content = textAreaRef.value.getContent()
    const invalidIndexes = validate(content)
    if (invalidIndexes.length > 0) {
        textAreaRef.value.setInvalid(invalidIndexes)
        return
    }
    textAreaRef.value.setInvalid([])
    console.log('ok', content)
}
</script>
<template>
    <TextArea ref="textAreaRef" class="text-area" />
    <button @click="handleSubmit">
        Submit
    </button>
</template>
<style lang="less">
#app {
    max-width: 960px;
    margin: 50px auto 0;
}

.text-area {
    margin: 20px;
    font-size: 14px;
}

button {
    margin-left: 20px;
}
</style>